<template>
  <!--  用户基础信息  -->
  <view

      class="user-common-info">
    <view style="height: 30rpx"></view>
    <view class="user-avatar-box">

      <image
          mode="aspectFill"
          :src="$kt.file.visit(emp.fileIdOfAvatar)"
          class="user-avatar"
      ></image>
      <view
          class="user-avatar-dot"
      >
        <image
            v-if="emp.genderCode==='male'"
            class="gender-icon"
            mode="aspectFill"
            :src="$kt.file.byPath('image/male.svg')"
        ></image>
        <image
            v-else-if="emp.genderCode==='female'"
            class="gender-icon"
            mode="aspectFill"
            :src="$kt.file.byPath('image/female.svg')"
        ></image>
        <view
            v-if="emp.gmtBirthday"
            class="age"
        >{{ $kt.date.getAge(emp.gmtBirthday) }}
        </view>
      </view>
    </view>

    <view class="user-text">

      <!-- 姓名 -->
      <view>
        <view v-if="emp.name" class="user-text-big">{{ emp.name }}</view>
        <view v-else class="user-text-big" style="opacity: .8">{{ "Not set name" }}</view>
      </view>
      <view style="height: 10rpx"></view>

      <!-- 手机号 -->
      <view class="user-text-small">{{ "Phone" }}：
        <text v-if="emp.phone">
          <text style="margin-right: 10rpx">{{ "+" }}{{ emp.phoneAreaCode }}</text>
          <text>{{ emp.phone }}</text>
        </text>
        <text v-else>{{ "Not set" }}</text>
      </view>

      <!-- 入职时间 -->
      <view class="user-text-small">{{ "Entry time" }}：
        <text v-if="emp.gmtEntry">{{ $kt.date.format(emp.gmtEntry, 'yyyy-MM-dd') }}</text>
        <text v-else>{{ "Not set" }}</text>
      </view>

      <view class="tag-box">

        <view
            v-for="item in emp.empCertificates"
            class="tag">
          {{ item.certificate.name }}
        </view>

      </view>

    </view>

  </view>

</template>

<script>
export default {
  props: {
    emp: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isSelf: {
      type: Boolean,
      default: false
    },
    isInAdmin: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      height: '280rpx',
      // 当前工作系列
      currentWorkSeries: {},
      // 学历
      eduLevel: {},
      // 学科专业
      eduMajor: {},
      // 学位
      eduMajorDegrees: [],
      // 用来展示学位信息文字
      eduMajorDegreesInfoStr: ''
    };
  },
  watch: {
    userInfo: {
      handler() {
        this.init();
      },
      deep: true
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    getHeight() {
      return this.height;
    },
    init() {

    }
  }
}
</script>

<style lang="scss" scoped>

.user-common-info {
  position: relative;
  width: 100%;
  top: 0;
  z-index: 999;
  padding: 0 20rpx 0 20rpx;
  box-sizing: border-box;
  //background-color: #FFFFFF;
  // 从上到下，由蓝到白
  //background: linear-gradient(180deg, #006e6d 0%, #FFFFFF 50%);
  background-color: #FFFFFF;

  .user-text-abs {
    position: absolute;
    right: -30rpx;
    font-size: 24rpx;
    color: #666666;
    padding: 5rpx 10rpx;
    top: 0;

    .icon {
      width: 26rpx;
      height: 26rpx;
      vertical-align: middle;
    }
  }

  .user-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 55%;
    margin-top: 20rpx;
    //border: 5rpx solid #60a5a4;
    border: 5rpx solid #f0f0f0;
  }

  .user-text {
    position: relative;
    display: inline-block;
    margin-left: 20rpx;
    vertical-align: top;
    letter-spacing: 1rpx;
    width: calc(100% - 120rpx - 20rpx - 20rpx);

    .user-text-big {
      font-weight: bold;
      font-size: 30rpx;
    }

    .user-text-small {
      font-size: 24rpx;
      color: #999;
    }

  }

  .user-text-abs:active {
    opacity: .7;
  }

  .tag-box {
    margin-top: 20rpx;
    // 超出不换行
    white-space: nowrap;
    height: 70rpx;
    // 滚动
    overflow-x: scroll;

    .tag {
      display: inline-block;
      padding: 10rpx 20rpx;
      border-radius: 30rpx;
      background-color: #f5f5f5;
      color: #666;
      font-size: 22rpx;
      margin-right: 10rpx;
    }
  }
}

.user-avatar-box {
  position: relative;
  display: inline-block;

  .user-avatar-dot {
    position: absolute;
    bottom: 0;
    padding: 5rpx 10rpx;
    //background-color: #60a5a4;
    background-color: #f0f0f0;
    font-size: 24rpx;
    border-radius: 20rpx;
    height: 30rpx;
    width: 90rpx;
    left: 50%;
    transform: translateX(-50%);

    .gender-icon {
      position: absolute;
      width: 30rpx;
      height: 30rpx;
      left: 5rpx;
    }

    .age {
      position: relative;
      display: inline-block;
      text-align: center;
      //color:#FFFFFF;
      color: #666666;
      font-weight: bold;
      width: calc(100% - 40rpx);
      margin-left: 30rpx;
      vertical-align: top;
      top: calc(50% - 0rpx);
      transform: translateY(-50%);
    }
  }

}


.tag-box::-webkit-scrollbar {
  display: none;

}


</style>
